<template>
	<div>

		<div class="self-layer" id="previewlayer"></div>
		<div class="preview-modal" id="previewModal">
			<div class="preview-main">
				<div class="del" @click="closePreviewLayer()">
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-close"></use>
					</svg>
				</div>
				<div class="preview-body">
          <!-- 预览 组件里套组件-->
          <wx v-if="wxShow"></wx>
          <wb v-if="wbShow"></wb>
          <tb v-if="tbShow"></tb>
					</div>
				</div>
			<div class="view-tips">正在预览“{{viewTips}}”</div>
			<div class="QRcode">
				<div class="QRcode-box">

          <qrcode :value="qaUrl" :options="{ size: 180 }" class="code-pos"></qrcode>
          <p>扫描二维码在手机上预览</p>
				</div>
				<div class="QRcode-type">
					<span v-for="(item,index) in [1,2,3]">
						<!--<img
				          :class="{gray:lightIndex !== index}"
				          :key="index"
				          :src="require(`../../assets/images/${index+1}.png`)"
				          @click="togglePreview(index)"/>-->
		          
		          	<!--灰度兼容-->  
		            <svg>
					   <image :xlink:href="require(`../../assets/images/${index+1}.png`)" :class="{gray:lightIndex !== index}"
				          :key="index"
				          @click="togglePreview(index)" width="60" height="60"></image>
					</svg>
					</span>
					
				</div>
			</div>
		</div>
		
	    <!--灰度兼容 勿刪-->
	    <svg style="width:0; height: 0;">
		    <filter id="grayscale">
		        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
		    </filter>
		</svg>
	</div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import VueQrcode from '@xkeshi/vue-qrcode';
  import tb from '@/components/previewPage/tb'
  import wb from '@/components/previewPage/wb'
  import wx from '@/components/previewPage/wx'
	export default {
		name: 'AsideRightBottom',
		data() {
			return {
        lightIndex: 0,
        editorContent: '',
        title: '',
        wxShow: false,     // 微信预览
        wbShow: false,    // 微博预览
        tbShow: false,    // 头条预览
        qaUrl: window.location.href.split("#")[0]+'#/wx',
        viewTips: '微信公众号'
			}
    },

    components: {
      qrcode: VueQrcode,
      tb,
      wb,
      wx
    },
    created() {
      this.togglePreview(0)
    },
    mounted() {

    },
    computed: {
      ...mapState([
        'articleLabelId',
        'folderId',
        'id', // 文章id
        'showPreviewLayer',
        'previewInfo',
        'articleDetail'
      ]),
    },
    watch: {
      showPreviewLayer () {
        this.editorContent = localStorage.getItem("editorContent") || ''
        this.title = localStorage.getItem("title") || ''
      },
      articleDetail() {
        // 文章详情变化,切换到当前文章,微信公众号点亮
        this.togglePreview(0)
      }
    },
		methods: {
      ...mapActions([
        'handleshowPreviewLayer'
      ]),
      closePreviewLayer() {
        this.handleshowPreviewLayer(false)
      },
      togglePreview(index) {
        // 切换点亮状态
        this.lightIndex = index;
        switch(index){
          case 0:
            this.wxShow = true
            this.wbShow = false
            this.tbShow = false
            this.qaUrl =  window.location.href.split("#")[0]+'#/wx?id='+this.articleDetail.articleId
            this.viewTips = "微信公众号"
              break;
          case 1:
            this.wxShow = false
            this.wbShow = true
            this.tbShow = false
            this.qaUrl =  window.location.href.split("#")[0]+'#/wb?id='+this.articleDetail.articleId
             this.viewTips = "新浪微博"
              break;
          case 2:
            this.wxShow = false
            this.wbShow = false
            this.tbShow = true
            this.qaUrl =  window.location.href.split("#")[0]+'#/tb?id='+this.articleDetail.articleId
            this.viewTips = "今日头条"
              break;
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/css/style.scss";
  .nogray {
    opacity: 1 !important;
    -webkit-filter: grayscale(0) !important;
    -moz-filter: grayscale(0) !important;
    -ms-filter: grayscale(0) !important;
    -o-filter: grayscale(0) !important;
    filter: grayscale(0) !important;
    filter: gray;
  }
  .code-pos {
    width: 100%;
  }
	.preview-modal{
		position: fixed;
		left: 50%;
		top: 20px;
		margin-left: -223px;
		z-index: 1000;
		width: 445px;
		height: 895px;
		background-image: url('../../assets/images/ip.png');
		background-repeat: no-repeat;
		background-size: cover;

		.del{
			position: absolute;
			top: 0px;
			right: -55px;
			width: 40px;
			height: 40px;
			.icon{
				color: $listTitleColor;
				width: 100%;
				height: 100%;
			}
		}
		.preview-main{
			margin-top: 114px;
			margin-left: 35px;
			padding-top: 71px;
			width: 375px;
			height: 596px;
			background-image: url('../../assets/images/wx02.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.preview-body{
				height: 596px;
				overflow: auto;
				.preview-title{
					margin-bottom: 10px;
					font-size: $fs16;
					line-height: $fs20;
					color: #333;
				}
				.preview-tag{
					margin-bottom: 10px;
					font-size: 10px;
					line-height: $fs20;
					color: #b3b3b3;
					span{
						margin-right: 10px;
						&:nth-child(2){
							color: #5b6a92;
						}
					}
				}
				.preview-content{
					p{
						font-size: $fs12;
						line-height: $fs22;
						color: #333;
					}
					.preview-img{
						width: 100%;
						img{
							margin: 0 auto;
							max-width: 100%;
						}
					}

				}
			}
		}
		.view-tips{
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: -30px;
			font-size: $fs14;
			color: $vfConcentColor;
			text-align: center;
			line-height: 20px;
		}
		.QRcode{
			position: absolute;
			left: 480px;
			bottom: 20px;
			width: 300px;
			text-align: center;
			.QRcode-box{
				padding: 10px;
				width: 160px;
				height: 180px;
				display: inline-block;
				background: $colorWhite;
				border: 1px solid $listborderColor;
				border-radius: 10px;
				img{
					margin-bottom: 2px;
					width: 160px;
					height: 160px;
				}
				p{
					font-size: $fs12;
					color: $vfConcentColor;
					text-align: center;
					line-height: 20px;
				}
			}
			.QRcode-type{
				margin-top: 20px;
				span{
					margin-right: 10px;
					display: inline-block;
					width: 60px;
					height: 60px;
					border-radius: 50%;
					background: $colorWhite;
					&:last-child{
						margin: 0px;
					}
				}
				img{
					width: 100%;
					height: 100%;  
				}

				.gray {
					/*border: 1px solid $listborderColor;*/
					border-radius: 50%;
					opacity: .5;
					-webkit-filter: grayscale(100%);
				    -moz-filter: grayscale(100%);
				    -ms-filter: grayscale(100%);
				    -o-filter: grayscale(100%);
				    filter: grayscale(100%);
				    filter: gray;
            		filter: url(#grayscale);
				}
			}
		}
	}



	/*@media only screen and (max-width: 1440px) {
		.preview-modal{
			position: absolute;
			left: 50%;
			top: 38px;
			margin-left: -200px;
			margin-bottom: 38px;
			z-index: 1000;
			width: 200px;
			height: 402px;
		}
	}*/
</style>
